<template>
  <div class="ht-search-form"
       v-loading="state.loading"
       style="margin-top: 16px">
    <p class="ht-form-title">并库信息</p>
    <el-row :gutter="24"
            class="ht-form-row"
            style="margin-top: 16px">
      <el-col class="ht-de-item"
              :span="4">
        <div class="ht-de-title">并库计划单号</div>
        <div class="ht-de-content">
          {{ state.selectRow.orderNo }}
        </div>
      </el-col>
      <el-col class="ht-de-item"
              :span="4">
        <div class="ht-de-title">并库状态</div>
        <div class="ht-de-content">

          <Status :color="status[state.selectRow.status-1]?.color">{{state.selectRow.statusStr}}</Status>
        </div>
      </el-col>
      <el-col class="ht-de-item"
              :span="4">
        <div class="ht-de-title">并库执行顺序</div>
        <div class="ht-de-content">
          {{ state.selectRow.isSortStr }}
        </div>
      </el-col>
      <el-col class="ht-de-item"
              :span="4">
        <div class="ht-de-title">创建人</div>
        <div class="ht-de-content">

          <ht-select-user v-model="state.selectRow.creatorId"
                          :readonly="true">
          </ht-select-user>

        </div>
      </el-col>
      <el-col class="ht-de-item"
              :span="4">
        <div class="ht-de-title">创建时间</div>
        <div class="ht-de-content">
          {{ state.selectRow?.creationTime?.replace("T"," ").slice(0,16) }}
        </div>
      </el-col>

    </el-row>
    <p class="ht-form-title">并库计划明细</p>
    <el-row :gutter="24"
            class="ht-form-row"
            style="margin-top: 16px">
      <el-col class="ht-de-item"
              :span="4">
        <div class="ht-de-title">并库进度 </div>
        <el-tooltip effect="dark"
                    style="line-height: 22px; margin-left: 6px;"
                    content="提示"
                    placement="top">
          <i class="el-icon-question"
             style="color: #cacecb"></i>
        </el-tooltip>
        <div class="ht-de-content">
          {{state.selectRow?.progress?.unStart+'/'+state.selectRow?.progress?.processing+'/'+state.selectRow?.progress?.complated+'/'+state.selectRow?.progress?.total}}
        </div>
      </el-col>

    </el-row>
    <ht-table class="ht-table-no-border"
              :data="state.dataSource"
              :hide-page="true"
              style="width: 100%; margin-top: 12px"
              border
              height="400px"
              highlight-current-row
              :columns="columns">
      <Temp slot="empty">
        <span slot="tips">暂无数据哦</span>
      </Temp>

    </ht-table>

  </div>
</template>
<script lang='ts'>
import Status from "@/components/status.vue";
import { Column, PageType } from "htui-yllkbz/src/packages/type";
import { Component, Prop, Vue } from "vue-property-decorator";
import Temp from "@/components/temp.vue";
import { MergeWareHouseApi, MergeWareHouseOrderDto } from "@/plugins/api";
import { _axios } from "vue-kst-auth";
interface State {
  /** 数据状态 */
  loading: boolean;
  filter: {
    skipCount: number;
    maxResultCount: number;
    totalCount: number;
    currentPage: number;
  };
  dataSource: any;
  selectRow: MergeWareHouseOrderDto;
}
@Component({
  components: {
    Temp,
    Status,
  },
})
export default class Index extends Vue {
  MergeWareHouseApi = new MergeWareHouseApi("/alcohol-management", _axios);
  @Prop() selectRow!: any;
  /** 数据 */
  state: State = {
    loading: false,
    filter: {
      skipCount: 0,

      maxResultCount: 20,
      currentPage: 1,
      totalCount: 0,
    },
    dataSource: [],
    selectRow: new MergeWareHouseOrderDto(),
  };
  /** 生命周期 */
  mounted() {
    this.getDetail();
  }
  /** 方法 */

  getDetail() {
    this.state.loading = true;
    this.MergeWareHouseApi.getDetail(this.selectRow.id)
      .then((res: any) => {
        //

        this.state.selectRow = res;
        this.getDataSource();
      })
      .finally(() => {
        this.state.loading = false;
      });
  }

  //分页
  changePage(data: PageType) {
    this.state.filter.currentPage = data.currentPage;
    this.state.filter.maxResultCount = data.maxResultCount;
    this.state.filter.skipCount = data.skipCount;
    this.getDataSource();
  }
  /** 查询列表 */
  getDataSource() {
    this.state.dataSource = this.state.selectRow.dtls;
  }
  /** 监听 */
  get columns(): Column[] {
    return [
      { key: "outSapName", title: "移出容器" },
      { key: "outSapCode", title: "移出容器编号" },
      //
      { key: "outBreedName", title: "酒品名称" },
      { key: "outBreedCode", title: "酒品代码" },

      { key: "inSapName", title: "移入容器" },

      { key: "inSapCode", title: "移入容器编号" },
      { key: "inBreedName", title: "酒品名称" },
      { key: "inBreedCode", title: "酒品代码" },
      { key: "reciveWineBreedCode", title: "关联移库单" },
      //

      //

      { key: "handel", title: "移库状态" },
    ];
  }

  get status() {
    return [
      { title: "未开始并库", key: 0, color: "#E2B236" },
      { title: "并库执行中", key: 1, color: "var(--primary)" },
      { title: "已关闭并库", key: 2, color: "#CACECB" },
    ];
  }
  /** 计算属性 */
}
</script>
<style lang='scss' scoped></style>